<template>
	<view class="goods-list">
		<view class="goods-list__box" v-for="(item, index) in listData" :key="index" @click="toGoodsDetail(item)">
			<image class="goods-list__box__image" :src="item.recPic" mode="widthFix"></image>
			<view class="goods-list__box__right">
				<view class="goods-list__box__top">
					<view class="goods-list__box__title">{{ item.name }}</view>
					<view v-if="item.weight && item.unitPrice && item.tare != item.weight"
						style="display: flex;align-items: center;color: #999999;font-size: 23rpx;margin-top: 10rpx;">
						<view class="">
							净重约{{item.weight - item.tare}}斤｜约{{(item.unitPrice/(item.weight - item.tare)).toFixed(2)}}元/斤
						</view>
					</view>
					<view style="font-size: 23rpx;color: #999999;margin-top: 10rpx;margin-bottom: 10rpx;"
						v-if="typeA==2">
						出库单价约{{(item.costPrice/item.weight).toFixed(2)}}元/斤
					</view>
					<view class="type-batchNo" style="margin-top: 30rpx;" v-if="typeA==2">
						{{item.batchNo == 1?'次晨达':'次日达'}}</view>
					<view class="type-batchNo" v-else>{{item.batchNo == 1?'次晨达':'次日达'}}</view>
				</view>
				<view class="goods-list__box__bot">
					<view class="goods-list__box__unitPrice">
						<view class="pricetop">
							<span
								v-if="item.unitPrice !== 0">￥</span>{{ item.unitPrice !== 0 ? item.unitPrice.toFixed(2) : '******' }}
						</view>
						<!-- <view class="goods-list_price" v-if="ishome && item.vip">
							<view class="pricetitle">VIP</view>
							<view class="youhuiprice">￥<text>{{Number(item.vip).toFixed(2)}}</text></view>
						</view> -->
					</view>
					<view class="goods-list__box__unit" v-if="item.unitPrice !== 0 && getGoodsShopNumber(item.id) > 0">
						<image class="unit-icon" mode="widthFix"
							:src="$imgUrl('/components/goodslist/icon-reduce2.png')" @click.stop="delGoods(item)">
						</image>
						<view class="number">{{ getGoodsShopNumber(item.id) }}</view>
						<image class="unit-icon" mode="widthFix" :src="$imgUrl('/components/goodslist/icon-plus2.png')"
							@click.stop="addGoods(item)"></image>
					</view>
					<view class="goods-list__box__addcar" v-else @click.stop="addIntoCar(item)">加入购物车</view>
				</view>
			</view>
		</view>

		<certificationPop v-if="showWindow" @closeWindow="closeWindow" />
	</view>
</template>

<script>
	import certificationPop from '@/components/certificationPop.vue'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		components: {
			certificationPop
		},
		name: 'goodsList',
		props: {
			listData: {
				type: [Array],
				default: []
			},
			ishome: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				showWindow: false,
				typeA: ""
			}
		},
		computed: {
			...mapState(['isLogin', 'userInfo', 'shopCart'])
		},
		mounted() {

			this.typeA = uni.getStorageSync('typeA') || ''
			console.log(12, this.typeA);
		},
		methods: {
			...mapActions(['login', 'getShopCart']),
			// 加入到购物车
			addIntoCar(item) {
				if (item.unitPrice !== 0) {
					// add
					this.addGoods(item)
				} else {
					if (this.isLogin === 1) {
						if (this.userInfo.authStatus == null || this.userInfo.authStatus == 2) {
							this.showWindow = true
						}
						if (this.userInfo.authStatus == 0) {
							uni.showToast({
								title: '后台正在审核中',
								icon: 'none',
								duration: 2000,
								mask: true
							});
						}
					} else {
						this.login()
					}
				}
			},
			// 关闭弹窗
			closeWindow() {
				this.showWindow = false
			},
			getGoodsShopNumber(id) {
				if (this.shopCart.detail !== null && this.shopCart?.detail?.length > 0) {
					const idx = this.shopCart.detail.findIndex(i => i.goodsId == id)
					return idx != -1 ? this.shopCart.detail[idx].count : 0
				} else {
					return 0
				}
			},
			addGoods(item) {
				uni.showLoading({
					mask: true
				})
				let that = this
				this.$apis.order.addCart({
						count: 1,
						goodsId: item.id
					})
					.then(res => {
						uni.hideLoading()
						that.getShopCart()
					})
			},
			delGoods(item) {
				uni.showLoading({
					mask: true
				})
				let that = this
				const idx = this.shopCart.detail.findIndex(i => i.goodsId == item.id)
				this.$apis.order.delCart({
						count: -1,
						goodsId: item.id,
						id: this.shopCart.detail[idx].id
					})
					.then(res => {
						uni.hideLoading()
						that.getShopCart()
					})
			},
			// 商品详情
			toGoodsDetail(item) {
				uni.navigateTo({
					url: '/pages/goodsDetail/index?id=' + item.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.type-batchNo {
		width: 85rpx;
		height: 40rpx;
		border-radius: 6rpx;
		border: 1px solid #5DD87D;
		line-height: 40rpx;
		text-align: center;
		font-size: 23rpx;
		color: #5DD87D;
		margin-top: 10rpx;
	}

	.goods-list {

		.goods-list__box {
			width: 100%;
			height: 258rpx;
			margin-bottom: 24rpx;
			display: flex;
			justify-content: space-between;

			.goods-list__box__image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 12rpx;
			}

			.goods-list__box__right {
				width: calc(100% - 200rpx - 16rpx);
				height: 234rpx;
				padding-bottom: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				border-bottom: 1rpx solid #E2E2E2;
			}

			.goods-list__box__title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
				width: 100%;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.goods-list__box__bot {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
			}

			.goods-list__box__addcar {
				width: 164rpx;
				height: 54rpx;
				background: #FB4041;
				border-radius: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #FFFFFF;
			}


			.goods-list__box__unitPrice {
				.pricetop {
					font-size: 36rpx;
					font-weight: bold;
					color: #FB4041;

					span {
						font-size: 26rpx;
					}
				}

				.goods-list_price {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-top: 6rpx;

					.pricetitle {
						width: 60rpx;
						height: 32rpx;
						color: #FBE6C7;
						font-size: 24rpx;
						background-color: #3F3F47;
						border-radius: 6rpx 0 0 6rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.youhuiprice {
						background-color: #FBE6C7;
						font-size: 20rpx;
						padding: 0 8rpx;
						height: 32rpx;
						color: #3F3F47;
						box-sizing: border-box;
						font-weight: 600;
						border-radius: 0 6rpx 6rpx 0;

						text {
							font-size: 26rpx;
						}
					}
				}
			}


			.goods-list__box__unit {
				display: flex;
				align-items: center;

				.unit-icon {
					width: 54rpx;
					height: 54rpx;
				}

				.number {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 20rpx;
				}
			}

		}
	}
</style>